<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		#apws li{
			padding: 10px;
			overflow: hidden;
			position: relative;
		}
		#apws>li:after{
			content: "";
			height: 1px;
			background: gray;
			position: absolute;
			left: 10px;
			right: 0;
			bottom: 0;
		}
		#bbbbb>li{
			margin: 10px;
			overflow: hidden;
			border-bottom: 1px solid gray;
		}
	</style>

	<body>
		<ul id="apws">
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
		</ul>
		<ul id="bbbbb">
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
		</ul>
	</body>
	<script type="text/javascript">
		//使用伪类元素，添加底部边框，相当于底部是一个div，颜色是背景色，位置使用绝对定位，前提是父元素使用相对定位，
		//边距的调节,使用left: 10px;right: 0;bottom: 0;来控制
	</script>

</html>